import React, { useEffect, useState } from 'react'
import { SearchBar, List } from 'antd-mobile'
import { debounce } from '../../utils/debounce'
import { useSelector, useDispatch } from 'react-redux'
import { set_list } from '../../store/actions'
const App: React.FC = () => {
  const list = useSelector((state: any) => state.list);
  const [value, setValue] = useState('')
  const dispatch = useDispatch()

  useEffect(() => { 
    dispatch(set_list())
  }, [])

  // 函数防抖
  const handleSearch = debounce((value :string) => {
    setValue(value)
  })
  return <div>
    <SearchBar
      onChange={handleSearch}
    ></SearchBar>
    <List>
      {
        (list as any[]).filter(v => v.title.includes(value)).map((v, i) => {
          return <List.Item 
            key={i}
            prefix={ <img src={v.url}></img> }
            description={v.desc}
          >
            <p>{v.title}</p>
          </List.Item>
        })
      }
    </List>
  </div>
}


export default App